
/**
* Interface for Field objects
* @interface IFormField
*/
/** @function {DOMElement} getElement */
/** @function {String} getName */
/** @function {Object} getValue */

/**
* Class providing a visual form for the user to submit data
* @class Form
*/
/**
* Creates the Form object
* @constructor Form
* @param {DOMElement} parentElement - the DOM element that this Form object shall be attached to
*/
function Form() {
	var fields = [];

	var el = document.createElement("div");
	el.className = "minjs-Form";
	var field_slot = document.createElement("div");
	var button_slot = document.createElement("div");
	//buttons.setAttribute("style", "float:right;");
	el.appendChild(field_slot);
	el.appendChild(button_slot);
	
	this.getElement = function(){return el;}
	this.getFields = function(){return fields;}
	this._getFieldSlot = function(){return field_slot;}
	this._getButtonSlot = function(){return button_slot;}
}

/**
* Adds a field to the form
* @function {void} addField
* @param {IFormField} field - the field to add
* @param {String} displayName - a string that will be shown near the field
*/
Form.prototype.addField = function(field, displayName){
	var p = document.createElement("p");
	p.appendChild(document.createTextNode(displayName));
	p.appendChild(field.getElement());
	this.getElement().insertBefore(p, this.getButtons());
	this.getFields().push(field);
}

Form.prototype.addButton = function(caption, onclick){
	var button = document.createElement("input");
	button.setAttribute("type", "button");
	button.setAttribute("value", caption);
	if(button.addEventListener){
		button.addEventListener("click", onclick, false);
	} else if(button.attachEvent){
		button.attachEvent("onclick", onclick);
	} // else : what if nothing is supported ?
	this.getButtons().appendChild(button);		
}

Form.prototype.getFieldValues = function(){
	var result = {};
	var fields = this.getFields();
	for(var i in fields){
		result[fields[i].getName()] = fields[i].getValue();
	}
	return result;
}


/**
* A form field for input of text
* @class TextField
* @implements IFormField
*/
/**
* Creates the TextField object
* @constructor TextField
* @param {String} name - the name of this field for later reference
*/
function TextField(name){
	var el = document.createElement("input");
	el.setAttribute("type", "text");
	el.className = "minjs-Form-TextField";
	this.getElement = function(){return el;}
	this.getName = function(){return name;}
	this.getValue = function(){return el.value;}
}

/**
* A form field for input of dates
* @class DateField
* @implements IFormField
*/
/**
* Creates the DateField object
* @constructor DateField
* @param {String} name - the name of this field for later reference
*/
function DateField(name){
	
	var thisObj = this;
	var today = new Date();
	var el = document.createElement("span");
	
	var month = document.createElement("select");
	for(var i in this.MONTHS){
		var option = document.createElement("option");
		option.value = i;
		option.text = this.MONTHS[i];
		try{month.add(option, null)}catch(e){month.add(option)} // IE bug workaround
	}
	month.selectedIndex = today.getMonth();
	month.onchange = function(){
		var daysInMonth = thisObj.getMonthDays(month.value, year.value);
		if(day.options.length < daysInMonth){
			while(day.options.length < daysInMonth){
				var option = document.createElement("option");
				option.text = day.options.length + 1;
				try{day.add(option, null)}catch(e){day.add(option)} // IE bug workaround
			}
		} 
		else if (day.options.length > daysInMonth){
			day.selectedIndex = Math.min(day.selectedIndex, daysInMonth - 1);
			while(day.options.length > daysInMonth)
				day.remove(day.options.length - 1);
		}
	}

	var year = document.createElement("select");
	for(var y = today.getFullYear() - 9; y <= today.getFullYear(); y++){
		var option = document.createElement("option");
		option.text = y;
		try{year.add(option, null)}catch(e){year.add(option)} // IE bug workaround
	}
	year.selectedIndex = 9;
	year.onchange = month.onchange;
	
	var day = document.createElement("select");
	var daysInMonth = this.getMonthDays(today.getMonth(), today.getFullYear());
	for(var d = 1; d <= daysInMonth; d++){
		var option = document.createElement("option");
		option.text = d;
		try{day.add(option, null)}catch(e){day.add(option)} // IE bug workaround
	}
	day.selectedIndex = today.getDate() - 1;

	el.appendChild(month);
	el.appendChild(day);
	el.appendChild(year);

	this.getElement = function(){return el;}
	this.getName = function(){return name;}
	this.getValue = function(){return new Date(year.value, month.value, day.value).getTime();}
}

DateField.prototype.MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
DateField.prototype.DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

DateField.prototype.getMonthDays = function(month, year){
	return (month == 1 && (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0))) ? 29 : this.DAYS[month];
}

/**
* A form field for choosing from a list of a pre-defined set of items
* @class ListboxField
* @implements IFormField
*/
/**
* Creates the ListboxField object
* @constructor ListboxField
* @param {String} name - the name of this field for later reference
* @param {String} key_name - the name of a property in the item object that will be used as a key
* @param {String} value_name - the name of a property in the item object that will be used as a value
* @param {Array} items - an array of objects to display in the list
*/
function ListboxField(name, key_name, value_name, items){
	var select = document.createElement("select");
	for(var i in items){
		var option = document.createElement("option");
		//option.value = items[i][key_name];
		//option.text = items[i][value_name];
		option.value = items[i].data[key_name];
		option.text = items[i].data[value_name];
		try{select.add(option, null)}catch(e){select.add(option)} // IE bug workaround
	}
	this.getElement = function(){return select;}
	this.getName = function(){return name;}
	this.getValue = function(){return select.options[select.selectedIndex].value;}
}

/**
* A form field for input of boolean data
* @class CheckboxField
* @implements IFormField
*/
/**
* Creates the CheckboxField object
* @constructor CheckboxField
* @param {String} name - the name of this field for later reference
* @param {optional Boolean} checked - indicates the initial state of the checkbox (defaults to 'unchecked')
*/
/*function CheckboxField(name, checked){
	var input = document.createElement("input");
	input.setAttribute("type", "checkbox");
	if(checked) input.checked = true;
	
	this.getElement = function(){return input;}
	this.getName = function(){return name;}
	this.getValue = function(){return input.checked;}
}
*/











